<template>
    <Form ref="form" :model="form" :rules="ruleValidate" :label-width="100">

        <FormItem label="校区名称" prop="campus_name.zh">
            <Input v-model="form.campus_name.zh" placeholder="输入校区名称"></Input>
        </FormItem>

        <FormItem label="校区管理人" prop="campus_manager.zh">
            <Input v-model="form.campus_manager.zh" placeholder="输入校区管理人"></Input>
        </FormItem>

        <FormItem label="校区联系电话" prop="campus_tel">
            <Input v-model="form.campus_tel" number placeholder="输入校区联系电话"></Input>
        </FormItem>

        <FormItem label="校区占用面积" prop="campus_area">
            <Input v-model="form.campus_area" number placeholder="输入校区占用面积">
                <span slot="append" style="width: 80px;">平米</span>
            </Input>
        </FormItem>

        <FormItem label="校区位置信息" prop="campus_position.zh">
            <Input v-model="form.campus_position.zh" placeholder="输入校区位置信息"></Input>
        </FormItem>

        <FormItem>
            <Button type="primary" :loading="btnload" @click="handleSubmit('form')">{{ condition?'修改':'添加' }}</Button>
        </FormItem>
    </Form>
</template>

<script>
export default {
    props: {
        condition: {
            type: [Boolean, Number],
            default: false
        }
    },
    data () {
        const validateTel = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请输入校区管理人电话'));
            }
            let tel = /^[1][3,4,5,7,8][0-9]{9}$/;
            // 模拟异步验证效果
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    if (!tel.test(value)) {
                        callback(new Error('请输入正确手机号'));
                    } else {
                        callback();
                    }
                }
            }, 1000);
        };
        
        const validatearea = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请输入校区占用面积'));
            }
            // 模拟异步验证效果
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    callback();
                }
            }, 1000);
        };
        return {
            form:{
                campus_name:{
                    zh: null,
                    en: null,
                    mn: null
                },
                campus_manager:{
                    zh: null,
                    en: null,
                    mn: null
                },
                campus_position:{
                    zh: null,
                    en: null,
                    mn: null
                },
                campus_tel:null,
                campus_area: null,
            },
            btnload: false,
            addurl: 'api/buildings/v1/campus/edit',
            editurl: 'api/buildings/v1/campus/update/' + this.condition,
            selUrl: 'api/buildings/v1/campus/getone/' + this.condition,

            ruleValidate: {
                'campus_name.zh':[
                    { required: true, message: '请输入校区名称', trigger: 'blur' }
                ],
                'campus_manager.zh':[
                    { required: true, message: '请输入校区管理人', trigger: 'blur' }
                ],
                'campus_position.zh':[
                    { required: true, message: '请输入校区位置信息', trigger: 'blur' }
                ],
                campus_tel:[
                    { validator: validateTel, trigger: 'blur' }
                ],
                campus_area: [
                    { validator: validatearea, trigger: 'blur' }
                ],
            },
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 表单验证
         * @param   {name}            要验证的表单
         * 
         ************************************************************/
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.btnload = true
                    if (this.condition) {
                        this.editSubmit ()
                    } else {
                        this.addSubmit ()
                    }
                } else {
                    this.$Message.error('请检查填写内容');
                }
            })
        },
        
        /************************************************************
         * 
         * 执行添加数据
         * 
         ************************************************************/
        addSubmit () {
            this.$http.post(this.addurl, this.form).then(val=>{
                this.btnload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.btnload = false 
            })
        },
        
        /************************************************************
         * 
         * 执行修改数据
         * 
         ************************************************************/
        editSubmit () {
            this.$http.put(this.editurl, this.form).then(val=>{
                this.btnload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.btnload = false 
            })
        },
        
        /************************************************************
         * 
         * 单条数据查询（修改）
         * 
         ************************************************************/
        selData () {
            this.$http.get(this.selUrl).then(val=>{
                let data = val.data
                this.form.campus_name = data.campus_name
                this.form.campus_manager = data.campus_manager
                this.form.campus_position = data.campus_position
                this.form.campus_area = data.campus_area
                this.form.campus_tel = parseInt(data.campus_tel)
            }).catch(err => {
            })
        }
    },
    created () {
        if (this.condition) this.selData ()
    },
}
</script>